// 各个页面搜索框

<template>
  <div class="Sticky" style="">
    <div class="jsx-432183574 search-entry">
      <a
        class="search-link"
        href="/search/book"
        style="flex-grow: 1; display: block; position: relative"
        ><div class="jsx-3171399629 search-input-wrapper">
          <div class="jsx-3171399629 search-input-button" style="left: 4px">
            <svg
              width="20px"
              height="20px"
              viewBox="0 0 20 20"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <path
                  d="M4.92926182,4.43309524 C7.5052251,1.85713196 11.6829004,1.85834556 14.2603607,4.43580588 C16.6839335,6.85937868 16.8297062,10.6977887 14.6969054,13.2890629 L17.8535358,16.4483686 C18.0484555,16.6438126 18.0484555,16.9602367 17.8535358,17.1556807 L17.7776353,17.2316253 C17.604302,17.4054245 17.3349035,17.4248082 17.1399984,17.289871 L17.070734,17.232036 L17.070734,17.2316253 L13.9239066,14.0833736 C11.3325723,16.3380487 7.39916198,16.2313836 4.93197246,13.7641941 C2.35451214,11.1867338 2.35329854,7.00905853 4.92926182,4.43309524 Z M13.4123254,5.28384118 C11.3034942,3.17501 7.88539628,3.17401706 5.77778996,5.28162338 C3.67018364,7.3892297 3.67117658,10.8073276 5.78000776,12.9161588 C7.88883893,15.02499 11.3069369,15.0259829 13.4145432,12.9183766 C13.4695242,12.8633956 13.5230703,12.8075227 13.5751814,12.7508045 C13.6010889,12.7226086 13.6267662,12.6940624 13.6520853,12.665311 L13.5751814,12.7508045 C13.626104,12.6953799 13.6756564,12.6391481 13.7238386,12.5821525 L13.6520853,12.665311 C13.70224,12.6083573 13.7509893,12.5505985 13.7983333,12.4920795 L13.7238386,12.5821525 C15.5164394,10.4616497 15.4123853,7.28390106 13.4123254,5.28384118 Z"
                  stroke="#AAAAAA"
                  stroke-width="0.2"
                  fill="#AAAAAA"
                ></path>
              </g>
            </svg>
          </div>
          <input
            type="search"
            readonly=""
            :placeholder="text"
            class="jsx-603226422 input search-input jsx-3027815852 icon-left"
            style="
              padding-top: 9px;
              padding-bottom: 9px;
              border-radius: 4px;
              background-color: rgb(247, 247, 247);
            "
          /></div
      ></a>
      <div class="jsx-432183574 category-btn">
        <a href="/categories"
          ><svg width="20" height="20">
            <path
              d="M17.718 11c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v5.436c0 .446-.046.607-.134.77a.909.909 0 01-.378.378c-.163.088-.324.134-.77.134h-5.436c-.446 0-.607-.046-.77-.134a.909.909 0 01-.378-.378c-.088-.163-.134-.324-.134-.77v-5.436c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134h5.436zm-10 0c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v5.436c0 .446-.046.607-.134.77a.909.909 0 01-.378.378c-.163.088-.324.134-.77.134H2.282c-.446 0-.607-.046-.77-.134a.909.909 0 01-.378-.378c-.088-.163-.134-.324-.134-.77v-5.436c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134h5.436zm9.782 1.5h-5v5h5v-5zm-10 0h-5v5h5v-5zM17.718 1c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v5.436c0 .446-.046.607-.134.77a.909.909 0 01-.378.378c-.163.088-.324.134-.77.134h-5.436c-.446 0-.607-.046-.77-.134a.909.909 0 01-.378-.378c-.088-.163-.134-.324-.134-.77V2.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134h5.436zm-10 0c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v5.436c0 .446-.046.607-.134.77a.909.909 0 01-.378.378c-.163.088-.324.134-.77.134H2.282c-.446 0-.607-.046-.77-.134a.909.909 0 01-.378-.378C1.046 8.325 1 8.164 1 7.718V2.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134h5.436zM17.5 2.5h-5v5h5v-5zm-10 0h-5v5h5v-5z"
              fill="#333"
              fill-rule="nonzero"
            ></path>
          </svg>
          <div class="jsx-432183574 category-btn-label">分类</div></a
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            text:"搜索书名、作者、分类、ISBN"
        }
    },
};
</script>

<style>

.search-entry.jsx-432183574 {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 20px 15px 15px;
    background: rgb(255, 255, 255);
}
a {
    color: inherit;
    text-decoration: none;
    background: transparent;
    outline: none;
}
.search-input-wrapper.jsx-3171399629 {
    position: relative;
    display: inline-block;
    width: 100%;
}
.search-input-button.jsx-3171399629 {
    position: absolute;
    top: 50%;
    padding: 6px;
    color: rgb(170, 170, 170);
    transform: translateY(-50%);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
svg:not(:root) {
    overflow: hidden;
}
.search-input.icon-left.jsx-3027815852 {
    padding-left: 36px;
}
.search-input.jsx-3027815852 {
    display: block;
    box-sizing: border-box;
    width: 100%;
    font-style: inherit;
    font-variant: inherit;
    font-stretch: inherit;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    padding: 6px 16px;
    background: rgb(242, 242, 242);
    border: none;
    outline: none;
}
/* 搜索框样式结束 */


/* 分类样式开始 */
.category-btn.jsx-432183574 {
    margin-left: 18px;
    text-align: center;
}
.category-btn-label.jsx-432183574 {
    font-size: 11px;
    line-height: 0.91;
    font-weight: 500;
}

/* 分类样式结束*/
</style>